<template>
  <el-popover placement="bottom-end" :width="186" trigger="hover">
    <template #reference>
      <div class="user-box" ref="reference">
        <el-avatar
          :size="36"
          :src="userInfo.avatar? userInfo.avatar : defaultAvatar"
        />
        <div class="right">
          <div class="phone">{{ userInfo.phone || "未绑定手机号" }}</div>
          <div class="bay-package">购买套餐</div>
        </div>
      </div>
    </template>
    <div class="user-box-new">
      <div class="top">
        <el-avatar
          :size="36"
          :src="userInfo.avatar? userInfo.avatar : defaultAvatar"
        />
        <div class="right">
          <div>{{ userInfo.phone }}</div>
          <img class="vip" src="~/assets/img/header/vip.png" alt="" />
        </div>
      </div>
      <div class="bottom">
        <span>有效期至</span><span>2024-02-08</span><span>续费</span>
      </div>
      <div class="user-setting" @click="improveInformationClick">
        <img class="icon" src="~/assets/img/header/user-setting.png" alt="" />
        <span>账户设置</span>
      </div>
      <div class="user-center" @click="persionOrderClick">
        <img class="icon" src="~/assets/img/header/user-center.png" alt="" />
        <span>个人中心</span>
      </div>
      <div class="btn">
        <div class="logout" @click="logoutClick">退出登录</div>
      </div>
    </div>
  </el-popover>
  <PersionOrder ref="persionOrder" />
  <ImproveInformation ref="improveInformation" />
</template>

<script setup name="UserBox">
const userInfo = useUserInfo();
const token = useToken();
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const persionOrder = ref();
const persionOrderClick = () => {
  persionOrder.value?.show();
};
const improveInformation = ref();
const improveInformationClick = () => {
  improveInformation.value?.show();
};
const logoutClick = ()=>{
  useCookie("token").value = "";
  useCookie("userInfo").value = "";
  token.value = "";
  userInfo.value = ""
}
</script>

<style lang="scss" scoped>
@import './userbox.scss';
</style>
